﻿@page "/datagrid-scrollbars"
@using FluentUI.Demo.Shared.Pages.DataGrid.Examples

<PageTitle>Table scrollbars</PageTitle>
<DemoSection Title="Table with scrollbars" Component="@typeof(DataGridTableScrollbars)">
    <Description>
        <p>
            Example of using an outside <code>div</code> and the <code>Style</code> parameter to achieve a table like DataGrid with infinite horizontal scrollbars to display all content on all devices.
        </p>
        <p>
            If you use this in combination with a sticky header, the style of the header will be lost for the columns that are rendered out of the view initially.
            You can fix this by adding the following <code>Style</code> to your data grid: <code>Style="min-width: max-content;"</code>
        </p>

    </Description>
</DemoSection>
